<template>
	<div class="sc-statistic">
		<div class="sc-statistic-title">
			{{ title }}
			<el-tooltip v-if="tips" effect="light">
				<template #content>
					<div style="width: 200px;line-height: 2;font-size: 16px;">
						{{ tips }}
					</div>
				</template>
				<i class="el-icon-question sc-statistic-tips"></i>
			</el-tooltip>
		</div>
        <el-row :gutter="24">
            <el-col :span="24">
				<div class="sc-statistic-box">
					<div class="sc-statistic-box-title">{{title1}}：</div>
					<div>{{value1 || 0}}</div>
				</div>
            </el-col>
        </el-row>   
	</div>
</template>

<script>
	export default {
		props: {
			title: { type: String, required: true, default: "" },
            tips: { type: String, default: "" },
			value1: { type: Number, default: 0 },
			title1: { type: String, default: "" },
		},
		data() {
			return {

			}
		},
		computed: {
			cmtValue(){
				return this.groupSeparator ? this.$TOOL.groupSeparator(this.value) : this.value
			}
		}
	}
</script>

<style scoped>
	.sc-statistic-title {font-size: 25px;color: #999;margin-bottom: 30px;}
	.sc-statistic-tips {margin-left: 5px;}
	.sc-statistic-content {font-size: 12px;color: #333; display: flex;justify-content: center; align-items: center;}
	.sc-statistic-content-value {font-weight: bold;}
	.sc-statistic-content-prefix {margin-right: 5px;}
	.sc-statistic-content-suffix {margin-left: 5px;font-size: 12px;}
	.sc-statistic-description {margin-top: 10px;color: #999;}
	.sc-statistic-box {font-size: 20px;color: #333; display: flex; justify-content: right;}
	.sc-statistic-box-title{ flex: 1;}
	[data-theme='dark'] .sc-statistic-content {color: #d0d0d0;}
</style>
